<template>
    <div class="about">
        <el-card class="cover">
            <slide-verify ref="block" slider-text="向右滑动->" accuracy=1 @again="onAgain" @success="onSuccess" @fail="onFail"
                @refresh="onRefresh"></slide-verify>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { defineComponent, ref } from "vue";
// 局部注册组件，需要单独引用组件样式
// 只提供局部引用的方式，不再采用插件形式，方便按需加载，减少主包大小
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";

const block = ref<SlideVerifyInstance>();
const onSuccess = () => {
    console.log("成功");
}

const onFail = () => {
    console.log("失败");
}

const onRefresh = () => {
    // console.log("");
}
const onAgain = () => {
    console.log("重试");
    block.value?.refresh();
};
</script>
<style>
@media (min-width: 1024px) {
    .about {
        min-height: 100vh;
        display: flex;
        align-items: center;
    }
}
</style>
  